<template>
  <div class="pieLineContainer">
    <el-cascader
      expand-trigger="hover"
      :options="options"
      v-model="selectedOptions2"
      @change="handleChange">
    </el-cascader>
    <div id="lineChart" style="height: 360px"></div>
  </div>
</template>

<script>
let echarts = require('echarts/lib/echarts')
// 引入折线图组件
require('echarts/lib/chart/line')
require('echarts/lib/component/legend')
export default {
  data () {
    return {
      msg: 'www',
      selectedOptions2: [],
      options: [{
        value: 'zhinan',
        label: '指南',
        children: [{
          value: 'shejiyuanze',
          label: '设计原则',
          children: [{
            value: 'yizhi',
            label: '一致'
          }, {
            value: 'fankui',
            label: '反馈'
          }, {
            value: 'xiaolv',
            label: '效率'
          }, {
            value: 'kekong',
            label: '可控'
          }]
        }, {
          value: 'daohang',
          label: '导航',
          children: [{
            value: 'cexiangdaohang',
            label: '侧向导航'
          }, {
            value: 'dingbudaohang',
            label: '顶部导航'
          }]
        }, {
          value: 'ziyuan',
          label: '资源',
          children: [{
            value: 'axure',
            label: 'Axure Components'
          }, {
            value: 'sketch',
            label: 'Sketch Templates'
          }, {
            value: 'jiaohu',
            label: '组件交互文档'
          }]
        }]
      }]
    }
  },
  created () {
    this.lineData = {
      xData: [],
      current: [],
      future: []
    }
    this.originData = {
      currentInfo: [{valueTime: '2018-05-22', powerValue: '432'}, {valueTime: '2018-05-23', powerValue: '352'}, {valueTime: '2018-05-24', powerValue: '562'}],
      historyInfo: [{valueTime: '2018-05-25', powerValue: '726'}, {valueTime: '2018-05-26', powerValue: '352'}, {valueTime: '2018-05-27', powerValue: '562'}]
    }
    this.originData.currentInfo.forEach((item, index) => {
      this.lineData.xData.push(item.valueTime)
      this.lineData.current.push(item.powerValue)
    })
    this.originData.historyInfo.forEach((item, index) => {
      this.lineData.xData.push(item.valueTime)
      this.lineData.future.push(item.powerValue)
    })
    while (this.lineData.xData.length > this.lineData.current.length) {
      this.lineData.current.push(null)
    }
    while (this.lineData.xData.length > this.lineData.future.length) {
      this.lineData.future.unshift(null)
    }
  },
  mounted () {
    this.drawLine(this.lineData)
  },
  methods: {
    handleChange (value) {
      console.log(value)
    },
    // 实现折线图
    drawLine (data) {
      // 基于准备好的dom，初始化echarts实例
      let lineChart = echarts.init(document.getElementById('lineChart'))
      // 绘制折线图
      lineChart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          x: 60,
          x2: 60,
          y: 45,
          height: 240
        },
        legend: {
          // right: 140,
          data: [{
            name: '今日预测',
            textStyle: {
              color: '#01af50'
            }
          }, {
            name: '今日实测',
            textStyle: {
              color: '#ffc000'
            }
          }]
        },
        color: ['#ffc000', '#01af50'],
        xAxis: {
          type: 'category',
          boundaryGap: false,
          splitLine: {
            show: true,
            lineStyle: {
              color: '#eee'
            }
          },
          axisLine: {
            // 轴线
            show: true,
            lineStyle: {
              color: '#483d8b'
            }
          },
          data: data.xData
        },
        yAxis: {
          axisLine: {
            // 轴线
            show: true,
            lineStyle: {
              color: '#408ee6',
              width: 2
            }
          },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#408ee6'
            }
          },
          splitLine: {
            // 分割线
            show: true,
            lineStyle: {
              color: '#eee'
            }
          }
        },
        series: [
          {
            name: '今日预测',
            type: 'line',
            yAxisIndex: 0,
            smooth: true,
            lineStyle: {
              normal: {
                color: '#ffc000'
              }
            },
            data: data.future
            // data: me.chartListData.stepNum
          },
          {
            name: '今日实测',
            type: 'line',
            yAxisIndex: 0,
            smooth: true,
            lineStyle: {
              normal: {
                color: '#01af50'
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgb(55, 158, 68)'
                }, {
                  offset: 1,
                  color: 'rgb(55, 70, 31)'
                }])
              }
            },
            data: data.current
          }
        ]
      })
    }
  }
}
</script>

<style lang="stylus">
</style>
